<template>
	<view class="t-page">
		<u-navbar height="60" bgColor="#0081ff">
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-nav-slot margin-top-xl" slot="left">
			</view>
			<!-- #endif -->
			<view slot="center" class="u-nav-slot" style="display: flex; flex-direction: column;align-items: center;">
				<view style=" font-size: 20px; color: #FFFFFF;">添加联动</view>
			</view>
		</u-navbar>

		<view class="t-type" @click="showType = true">
			<view class="t-text1">联动类型：</view>
			<view class="t-text2">
				<input class="text-xl" placeholder="请选择联动类型!" :disabled="true" :value="type">
			</view>
			<view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<u-picker :show="showType" title="联动类型" :columns="columns" @confirm="confirmType"
				@cancel="showType = false">
			</u-picker>
		</view>
		<view v-if="type == '按钮联动'" style="height: 100%;">
			<view style="display: flex;justify-content: center; height: 700rpx; align-items: center;">
				<text>该功能正在开发中！</text>
			</view>
		</view>

		<view v-if="type == '数据联动'">
			<view class="t-type" @click="showSelect = true">
				<view class="t-text1">数据项：</view>
				<view class="t-text2">
					<input class="text-xl" placeholder="请选择数据项!" :disabled="true" :value="execute.numName">
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<u-picker :show="showSelect" title="数据项" :columns="numberList" keyName="numName" @confirm="confirmNum"
					@cancel="showSelect = false"></u-picker>
			</view>

			<view v-if="execute.numId != null" class="t-type" @click="showExecuteType = true">
				<view class="t-text1">监听类型：</view>
				<view class="t-text2">
					<input class="text-xl" placeholder="请选择监听类型!" :disabled="true" :value="execute.type">
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<u-picker :show="showExecuteType" title="监听类型" :columns="executeType" keyName="numName"
					@confirm="confirmExecute" @cancel="showExecuteType = false"></u-picker>
			</view>
			<view v-if="execute.type != null">
				<view class="t-type">
					<view class="t-text1">设置阈值：</view>
					<view class="t-text2">
						<u-number-box v-model="execute.value" :min="-10000" inputWidth="80"></u-number-box>
					</view>
				</view>

				<view class="t-rule">
					<view class="text-xl">选择执行动作</view>
					<view>
						<scroll-view class="uni-swiper-tab uni-scroll-view " scroll-x="true" scroll-left="120"
							cancelable="false">
							<view v-for="(item,index) in buttonList" :key="index" class="scrollx_items">
								<view class="padding bg-white text-center light  device-list"
									:class="item.checked == true? 'bg-blue': ''" @tap="select(item.buttonId)">
									<image class="margin-top-sm" :src="imgUrl + item.image"
										style="width: 5vh;height: 5vh;">
									</image>
									<text class="margin-top-sm">{{item.buttonName}}</text>
								</view>
								<radio-group class="block flex margin-left-sm" @change="RadioChange"
									:data-index="index">
									<view class="flex">
										<view class="title">开</view>
										<radio class="margin-left-sm" data-id="{{}}"
											:class="item.radio=='open'?'checked':''"
											:checked="item.radio=='open'?true:false" value="open">
										</radio>
									</view>
									<view class="flex margin-left-sm">
										<view class="title">关</view>
										<radio class="margin-left-sm" :data-set="index"
											:class="item.radio=='off'?'checked':''"
											:checked="item.radio=='off'?true:false" value="off">
										</radio>
									</view>
								</radio-group>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="submit">
					<u-button text="提交" color="linear-gradient(to right, rgb(174, 157, 255), rgb(80, 156, 213))"
						size="large" @click="save">
					</u-button>
				</view>
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 数据联动
				showType: false,
				showSelect: false,
				showExecuteType: false,
				type: '',
				columns: [
					['按钮联动', '数据联动']
				],
				numberList: [], //number List
				executeType: [
					["MAX", "MIN"]
				],
				execute: {
					numId: null,
					numName: '',
					type: null,
					value: ''
				},

				buttonList: [], //按钮列表
				selectId: [], //选中的按钮
				execteList:[],
				value: null,
				numberList: [], //number List
			}
		},
		onLoad() {
			
		},
		methods: {
			// 选择相应类型
			confirmType(e) {
				this.showType = false
				this.type = e.value[0]
				if (e.value[0] == '数据联动') {
					this.getDataList()
				} else {

				}
			},
			confirmNum(e) {
				this.showSelect = false
				this.execute.numId = e.value[0].numId
				this.execute.numName = e.value[0].numName
			},
			confirmExecute(e) {
				this.showExecuteType = false
				this.execute.type = e.value[0]
				this.getExecteList()
				this.getButton()
			},

			// 获取用户下的数据项
			getDataList() {
				let that = this
				this.$http.request({
					url: 'app/number/listByUserId',
					method: 'GET',
					success(data) {
						let list = data.data.list
						that.numberList.push(list)
					}
				})
			},
			//设置选择的按钮
			select(buttonId) {
				let that = this
				var items = this.buttonList
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].buttonId == buttonId) {
						if (!items[i].checked) {
							this.selectId.push(buttonId)
						} else {
							that.remove(that.selectId, buttonId)
						}
						items[i].checked = !items[i].checked;
					}
				}
				this.buttonList = items
			},
			// 删除选择
			remove(arr, val) {
				var index = arr.indexOf(val);
				if (index > -1) {
					arr.splice(index, 1);
				}
			},
			// 选择执行的指令
			RadioChange(e) {
				let index = e.currentTarget.dataset.index
				this.buttonList[index].radio = e.detail.value
			},
			getExecteList() {
				let that = this
				this.$http.request({
					url: 'app/execute/listByType',
					method: 'GET',
					data: {
						numId: this.execute.numId,
						type: this.execute.type
					},
					success(data) {
						let list = data.data.list
						that.execteList = list
					}
				})
			},
			// 获取所有按钮
			getButton() {
				let that = this
				this.$http.request({
					url: 'app/button/listByUserIdAll',
					method: 'GET',
					success(data) {
						let list = data.data.list
						for (var i = 0; i < list.length; i++) {
							list[i].checked = false
							list[i].radio = null
							for (var j = 0; j < that.execteList.length; j++) {
								if (list[i].buttonId == that.execteList[j].buttonId) {
									list[i].checked = true
									list[i].radio = that.execteList[j].action == '1' ? 'open' : 'off'
									that.selectId.push(list[i].buttonId)
								}
							}
						}
						that.buttonList = list
					}
				})
			},
			// 保存设置
			save() {
				let list = []
				if (this.isEmpty(this.selectId, this.buttonList)) {
					for (var i = 0; i < this.selectId.length; i++) {
						let index = this.buttonList.findIndex(item => item.buttonId == this.selectId[i]);
						let obj = new Object()
						obj.buttonId = this.buttonList[index].buttonId
						obj.action = this.buttonList[index].radio == 'open' ? 1 : 0
						list.push(obj)
					}
					this.$http.request({
						url: 'app/execute/save',
						method: 'POST',
						data: {
							'numId': this.execute.numId,
							'list': list,
							'type': this.execute.type,
							'value': this.execute.value
						},
						success: (data) => {
							if (data.data && data.data.code == 0) {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					})
				} else {
					uni.showToast({
						title: "请补全相关参数后，再设置定时",
						icon: "none",
						position: 1000
					})
				}
			},
			isEmpty(selectId, buttonList) {
				if (selectId.length <= 0) {
					return false
				}
				if (this.execute.numId == null || this.execute.numId == '') {
					return false
				}
				if (this.execute.type == null || this.execute.type == '') {
					return false
				}
				if (this.execute.value == null || this.execute.value == '') {
					return false
				}
				for (var i = 0; i < selectId.length; i++) {
					let index = buttonList.findIndex(item => item.buttonId == selectId[i]);
					if (index >= 0 && buttonList[index].radio === null) {
						return false
					}
				}
				return true
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f4f4f4;
	}

	.t-rule {
		background-color: #fcfcfc;
		margin: 10rpx;
		padding: 20rpx;
	}

	.t-type {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 18px;
		height: 100rpx;
		margin: 10rpx;
		margin-top: 20rpx;
		background-color: #fcfcfc;

		.t-text1 {
			width: 35%;
			margin-left: 20rpx;
		}

		.t-text2 {
			width: 50%;
			justify-content: center;
		}

	}

	.submit {
		margin: 20rpx;
		margin-top: 100rpx;
	}

	.device-list {
		width: 7rem;
		height: 7rem;
		border: #DDDDDD solid 2px;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 10px;
	}

	/* 二级菜单设置左右滑动 */
	.uni-swiper-tab {
		white-space: nowrap;
	}

	.scrollx_items {
		display: inline-block;
		box-sizing: border-box;
		margin-left: 10rpx;
		margin-top: 3px;
	}

	.u-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: $u-border-color;
		padding: 3px 7px;
		opacity: 0.8;
	}
</style>
